<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title></title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  <link rel="stylesheet" href="/static/mobile/weuix.css">
  <link rel="stylesheet" href="/static/mobile/css.css">
  <link rel="stylesheet" href="/static/mobile/iconfont.css">
  <style>
    .weui-tab__bd {
      padding: 10px;
    }

    .weui-tabbar__item.weui-bar__item--on .weui-tabbar__label,
    .weui-tabbar__item .weui-tabbar__label,
    .weui-tabbar__item i {
      /*color: #0000ff;*/
    }

    .welcome {
      background-color: #bfcdda;
      padding: 15px;
      margin-bottom: 20px;
    }

    .weui-navbar + .weui-tab__bd {
      padding-top: 0px;
    !important;
    }

    #tab2 {
      padding: 20px 10px;
    }

    .banner {
      height: 149px;
      background: url("/static/mobile/images/my-banner2.png") no-repeat;
      width: 100%;
      background-size: 100% 100%;
      display: flex;
      margin-bottom: 3px;
      position: relative;

    }

    .school {
      position: absolute;
      right: 5px;
      color: #ffffff;
    }

    .name {
      display: flex;
      border-radius: 50%;
      background-color: #0099ff;
      width: 64px;
      height: 44px;
      color: #FFFFFF;
      text-align: center;
      margin: 90px auto;
      justify-content: center;
      align-items: Center;
    }

    .weui-navbar__item.tab-green {
      background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
      border-bottom: 3px solid #04be02;
      color: #04be02;
      transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
    }

    .weui-navbar__item.weui-bar__item--on {
      background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
      border-bottom: 3px solid #04be02;
      color: #04be02;
      transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
    }

  </style>
</head>
<body>
<section id="content">
  <div class="banner">
    <div class="school">化学化工学院实验室安全学习系统</div>
    <div class="name">{{realname}}</div>
  </div>


  <div class="welcome">
    <span v-show="exam_info.exam_times>0">正式考试成绩{{exam_score}}分 </span>
    <span v-show="exam_info.exam_times==0">您尚未参加过正式考试 </span>
    <span @click="logout" class="pull-right">退出</span>
  </div>
  <div class="weui-tab" id="t1">
    <div class="weui-navbar" style="position: relative">
      <a class="weui-navbar__item weui-bar__item--on" href="#tab1"> 公告
        <span class="weui-badge js-unread-count hide"
              style="position: absolute;">0</span>
      </a>
      <a class="weui-navbar__item" href="#tab2"> 模拟成绩 </a>
      <a class="weui-navbar__item" href="#tab3"> 承诺书 </a>
    </div>
    <div class="weui-tab__bd">
      <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active  ">
        <div class="weui-news" style="padding-bottom: 64px">
          <ul class="weui-news-list">
            <li class="weui-news-item" v-for="item in notices">
              <div class="weui-news-inner">
                <div class="weui-news-inners">
                  <a :href="'notice.html?id=' + item.id">
                  <div class="weui-news-text">
                    <div class="weui-news-title">
                     {{item.title}}
                      <span class="weui-badge" v-show="!item.readtime">未读</span>
                    </div>
                  </div>
                  </a>
                  <div class="weui-news-info">
                    <div class="weui-news-infoitem">
                      <i class="iconfont icon-wode"></i>
                      <span class="weui-news-left">{{item.realname}}</span>
                    </div>
                    <div class="weui-news-infoitem">{{item.create_time}}</div>
                  </div>
                </div>

              </div>
            </li>
          </ul>
        </div>
      </div>
      <div id="tab2" class="weui-tab__bd-item ">
        <table class="">
          <thead>
          <tr>
            <th>分数</th>
            <th>排名</th>
            <th>时间</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in testScores">
            <td title="分数">{{item.score}}分</td>
            <td title="分数">击败{{item.score_sort}}人</td>
            <td title="时间">{{item.create_time.substr(0,16)}}</td>
          </tr>
          </tbody>
        </table>

      </div>
      <div id="tab3" class="weui-tab__bd-item " v-html="commitment">
      </div>
    </div>
  </div>
</section>
<div id="footer"></div>

<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script src="/static/mobile/main.js"></script>

<script>
  $("#footer").load('footer.html');


  var content = new Vue({
    el: "#content",
    data: {
      notices: [],
      testScores: [],
      commitment: '',
      realname: '',
      exam_score: 0,
      exam_info: {},
    },
    created: function () {
      this.getNotices();
      this.getTestScore();
      this.getCommitment();
      this.getMyinfo();
      this.realname = localStorage.getItem('realname');
    },
    computed: {
      shortTestDatetime: function () {

      }
    },
    watch: {},
    methods: {
      logout: function () {
        js_request('/portal/login/logout', {}, function (result) {
          if (result.code == 1) {
            localStorage.removeItem("realname");
            window.location.href = 'login.html';
          }
        });
      },
      getMyinfo: function () {
        var that = this;
        js_request('/portal/user/my', {}, function (result) {
          if (result.code == 1) {
            that.exam_score = result.data.exam_score;
            that.exam_info = {
              exam_score: result.data.exam_score,
              exam_times: result.data.exam_times,
              is_pass: result.data.is_pass,
            };

            console.log(that.exam_info);

          }
        });
      },
      getNotices: function () {
        var that = this;
        $.post("/portal/notice/index", {}, function (result) {
          if (result.code == 1) {
            that.notices = result.data.data;
          }
        })
      },
      getTestScore: function () {
        var that = this;
        $.post("/portal/my/index/", {type: 1}, function (result) {
          if (result.code == 1) {
            that.testScores = result.data;
          }
        })
      },
      getCommitment: function () {
        var that = this;
        $.post("/portal/my/getCommitment/", {}, function (result) {
          if (result.code == 1) {
            that.commitment = result.data;
          }
        })
      },
    },
  });

</script>
</body>
</html>